<script setup>
import UserInfo from '@/components/UserInfo.vue'

defineProps({
  welfare: { type: Object, required: true }
})

const emit = defineEmits(['changeStatus', 'showControl'])
</script>

<template>
  <div class="welfare-item">
    <div class="welfare-name">
      <van-text-ellipsis :content="welfare.name || welfare.title" row="1" />
      <div>ID:{{ welfare.id }}</div>
    </div>
    <div class="welfare-user">
      <UserInfo
        :nickname="welfare.nickname"
        :avatar="welfare.avatar"
        :id="welfare.user_id"
      ></UserInfo>
    </div>
    <!-- <div style="flex: 1"></div> -->
    <span style="margin-right: 5px; font-size: 12px">￥{{ welfare.amount }}</span>
    <van-switch
      inactive-color="red"
      class="user-control-switch"
      @update:model-value="emit('changeStatus', { id: welfare.id, status: $event })"
      :model-value="welfare.status === 1"
      :disabled="welfare.is_finish === 2"
    />
    <van-button @click="emit('showControl')" style="margin-left: 6px" size="small" type="primary">操作</van-button>
  </div>
</template>

<style scoped lang="less">
.welfare-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;

  .welfare-user {
    flex: 1;
  }

  .welfare-name {
    width: 60px;
    font-size: 12px;
    color: #333;
    margin-right: 10px;
  }
}
</style>
